<template>
    <div class="input-text">
        <div v-for="item in props.list" :key="item.id">
            <input type="checkbox" v-model="item.isShow" @click="doIshow(item)">
            <span>{{ item.value }}</span>
        </div>
        <div class="box-bottom">
            <input type="checkbox" v-model="All" @click="doAll">全选
            <input type="checkbox" v-model="allNan" @click="doAllNan">反选
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { todoList } from './type';
// 接收属性
const props = defineProps<{
    list?: Array<todoList>
}>()
const All = ref<boolean>(false);
const allNan = ref<boolean>(false);
// 全选
const emit = defineEmits(['doAll'])// 接收方法
const doAll = () => {
    All.value = !All.value
    emit('doAll', All.value)
}
const getIsFlag = () => props.list?.every((item: todoList) => item.isShow) as boolean
// 单选
const doIshow = (v: todoList) => {
    v.isShow = !v.isShow
    getIsFlag() ? All.value = true : All.value = false
}
// 反选
const doAllNan = () => {
    allNan.value = !allNan.value
    props.list?.forEach((item: todoList) => {
        if (allNan.value) {
            item.isShow ? item.isShow = false : item.isShow = true
        }
    })
    getIsFlag() ? All.value = true : All.value = false
}
</script>

<style scoped></style>
